Sci-Fi Wars | Random Sci-Fi Movie Battle & Generator

Sci-Fi Wars Component /* Scoped CSS: Sadece bu bileşeni etkiler */ #scifi-wrapper { --sf-primary: #e50914; --sf-secondary: #007bff; --sf-dark-bg: #0a0a0a; --sf-card-bg: #141414; font-family: 'Montserrat', sans-serif; background-color: var(--sf-dark-bg); color: #fff; position: relative; width: 100%; padding: 50px 0; box-sizing: border-box; overflow: hidden; background-image: radial-gradient(circle at center, #1a1a1a 0%, #000 100%); } #scifi-wrapper * { box-sizing: border-box; } /* HEADER */ #scifi-wrapper .sf-header { text-align: center; margin-bottom: 40px; } #scifi-wrapper .sf-logo { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; background: linear-gradient(to right, var(--sf-secondary), #fff, var(--sf-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 4px; display: inline-block; filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); } #scifi-wrapper .sf-subtitle { color: #aaa; font-size: 0.9rem; letter-spacing: 1.5px; margin-top: 5px; font-weight: 300; } #scifi-wrapper .sf-subtitle strong { color: #fff; font-weight: 700; } /* ARENA */ #scifi-wrapper .arena-container { display: flex; justify-content: center; align-items: stretch; width: 95%; max-width: 1200px; margin: 0 auto; position: relative; gap: 20px; } /* CARDS */ #scifi-wrapper .fighter-side { flex: 1; background: var(--sf-card-bg); border-radius: 12px; padding: 0; display: flex; flex-direction: column; align-items: center; min-height: 600px; /* İçerik arttığı için biraz uzattım */ position: relative; transition: all 0.5s ease; border: 1px solid #333; box-shadow: 0 10px 30px rgba(0,0,0,0.5); overflow: hidden; } #scifi-wrapper .fighter-content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; } /* PLACEHOLDER */ #scifi-wrapper .placeholder-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; padding: 40px; color: rgba(255,255,255,0.3); text-align: center; } #scifi-wrapper .placeholder-icon { font-size: 4rem; margin-bottom: 20px; border: 3px dashed rgba(255,255,255,0.2); width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* VS BUTTON */ #scifi-wrapper .vs-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 50; } #scifi-wrapper .vs-btn { width: 100px; height: 100px; background: #000; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; cursor: pointer; border: 4px solid #fff; animation: sf-pulse 2s infinite; transition: all 0.3s ease; outline: none; } #scifi-wrapper .vs-btn:hover { transform: scale(1.1); background: #fff; color: #000; box-shadow: 0 0 30px rgba(255,255,255,0.6); animation: none; } @keyframes sf-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } /* MOVIE INFO STYLES */ #scifi-wrapper .poster-container { width: 100%; aspect-ratio: 2 / 3; overflow: hidden; position: relative; border-bottom: 1px solid #333; } #scifi-wrapper .poster-container img { width: 100%; height: 100%; object-fit: cover; display: block; } #scifi-wrapper .movie-details { padding: 20px; text-align: center; width: 100%; background: linear-gradient(to top, rgba(0,0,0,1), rgba(20,20,20,0)); flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; } #scifi-wrapper .movie-title { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; margin: 5px 0; line-height: 1; color: #fff; } #scifi-wrapper .movie-meta { color: #aaa; font-size: 0.8rem; margin-bottom: 10px; font-weight: bold; } /* Yeni Eklenen Açıklama ve Cast Stilleri */ #scifi-wrapper .movie-overview { font-size: 0.85rem; color: #ddd; line-height: 1.4; margin: 10px 0; display: -webkit-box; -webkit-line-clamp: 3; /* 3 satırda kes */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } #scifi-wrapper .movie-cast-info { font-size: 0.75rem; color: #888; margin-bottom: 15px; text-align: center; line-height: 1.4; } #scifi-wrapper .movie-cast-info strong { color: #fff; } #scifi-wrapper .score-display { font-size: 3.5rem; font-family: 'Bebas Neue', sans-serif; font-weight: bold; margin: 5px 0 15px 0; opacity: 0; transform: scale(0.5); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-shadow: 0 0 20px currentColor; } #scifi-wrapper .trailer-btn { background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #fff; padding: 8px 25px; font-size: 0.75rem; cursor: pointer; font-family: 'Montserrat', sans-serif; text-transform: uppercase; margin-top: auto; transition: 0.3s; letter-spacing: 1px; } #scifi-wrapper .trailer-btn:hover { background: #fff; color: #000; box-shadow: 0 0 15px rgba(255,255,255,0.5); } /* WINNER / LOSER Logic */ #scifi-wrapper .winner-active { border: 2px solid #ffd700; box-shadow: 0 0 40px rgba(255, 215, 0, 0.3); z-index: 10; } #scifi-wrapper .winner-active .score-display { color: #ffd700; opacity: 1; transform: scale(1); } #scifi-wrapper .loser-active { filter: grayscale(100%) opacity(0.5); transform: scale(0.98); } #scifi-wrapper .loser-active .score-display { opacity: 1; transform: scale(1); } #scifi-wrapper .winner-badge { position: absolute; top: 20px; right: 20px; background: #ffd700; color: #000; padding: 5px 15px; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; transform: rotate(10deg); box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 20; animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes popIn { from { transform: scale(0) rotate(0deg); } to { transform: scale(1) rotate(10deg); } } /* MODAL */ #scifi-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); } #scifi-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 900px; aspect-ratio: 16/9; background: #000; box-shadow: 0 0 50px rgba(255,255,255,0.1); } #scifi-close { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 40px; cursor: pointer; } @media (max-width: 768px) { #scifi-wrapper .arena-container { flex-direction: column; gap: 40px; } #scifi-wrapper .vs-container { position: relative; top: auto; left: auto; transform: none; margin: -20px auto; } #scifi-wrapper .fighter-side { width: 100%; min-height: auto; } } SCI-FI WARS Press VS to initiate the Ultimate Sci-Fi Battle ? FIGHTER 1 Waiting for data... VS ? FIGHTER 2 Waiting for data... × const sfApiKey = '25ec2c68c8aa9357786e0be45ac80de3'; let sfIsBattling = false; async function startSciFiWar() { if (sfIsBattling) return; sfIsBattling = true; const btn = document.getElementById('sf-vs-btn'); const leftSide = document.getElementById('sf-left'); const rightSide = document.getElementById('sf-right'); const leftContent = document.getElementById('content-left'); const rightContent = document.getElementById('content-right'); // RESETLEME btn.style.transform = "scale(0.8) rotate(360deg)"; btn.disabled = true; btn.style.opacity = "0.7"; leftSide.classList.remove('winner-active', 'loser-active'); rightSide.classList.remove('winner-active', 'loser-active'); document.querySelectorAll('.winner-badge').forEach(el => el.remove()); leftContent.innerHTML = getLoadingHTML("Scanning Sector 1..."); rightContent.innerHTML = getLoadingHTML("Scanning Sector 2..."); try { setTimeout(async () => { let m1, m2; do { m1 = await getSfMovie(); m2 = await getSfMovie(); } while (m1.id === m2.id); renderSfFighter(m1, 'left', leftContent); renderSfFighter(m2, 'right', rightContent); btn.innerText = "VS"; btn.style.transform = "scale(1)"; btn.style.opacity = "1"; setTimeout(() => { decideSfWinner(m1, m2); sfIsBattling = false; btn.disabled = false; btn.innerText = "AGAIN"; btn.style.fontSize = "1.5rem"; }, 800); }, 500); } catch (err) { console.error(err); leftContent.innerHTML = `Error`; rightContent.innerHTML = `Error`; sfIsBattling = false; btn.disabled = false; } } function getLoadingHTML(text) { return ` ${text} @keyframes spin { 100% { transform:rotate(360deg); } } `; } async function getSfMovie() { const page = Math.floor(Math.random() * 40) + 1; const url = `https://api.themoviedb.org/3/discover/movie?api_key=${sfApiKey}&with_genres=878&vote_average.gte=6.5&vote_count.gte=500&include_adult=false&page=${page}`; const res = await fetch(url); const data = await res.json(); if (!data.results || data.results.length === 0) return getSfMovie(); const movie = data.results[Math.floor(Math.random() * data.results.length)]; // cast ve videos için detay çekiyoruz const detail = await fetch(`https://api.themoviedb.org/3/movie/${movie.id}?api_key=${sfApiKey}&append_to_response=videos,credits`).then(r=>r.json()); return detail; } function renderSfFighter(movie, side, container) { const year = movie.release_date ? movie.release_date.split('-')[0] : ''; const director = movie.credits.crew.find(c => c.job === 'Director')?.name || 'Unknown'; const trailer = movie.videos.results.find(v => v.site === 'YouTube' && v.type === 'Trailer'); // GÜNCELLEME 2: Oyuncu listesini al (ilk 3 kişi) const cast = movie.credits.cast.slice(0, 3).map(c => c.name).join(', '); const trailerHtml = trailer ? `Watch Trailer` : `No Trailer`; const posterSrc = movie.poster_path ? `https://image.tmdb.org/t/p/w780${movie.poster_path}` : 'https://via.placeholder.com/500x750?text=No+Image'; // GÜNCELLEME 3: Yeni HTML Yapısı (Özet ve Cast ile) container.innerHTML = ` ${movie.title} ${year} • ${movie.runtime}m ${movie.vote_average.toFixed(1)} ${movie.overview} Director: ${director} Stars: ${cast} ${trailerHtml} `; } function decideSfWinner(m1, m2) { const leftSide = document.getElementById('sf-left'); const rightSide = document.getElementById('sf-right'); document.getElementById('sf-score-left').style.opacity = '1'; document.getElementById('sf-score-left').style.transform = 'scale(1)'; document.getElementById('sf-score-right').style.opacity = '1'; document.getElementById('sf-score-right').style.transform = 'scale(1)'; if (m1.vote_average > m2.vote_average) { leftSide.classList.add('winner-active'); rightSide.classList.add('loser-active'); addSfBadge(leftSide); } else if (m2.vote_average > m1.vote_average) { rightSide.classList.add('winner-active'); leftSide.classList.add('loser-active'); addSfBadge(rightSide); } } function addSfBadge(element) { const badge = document.createElement('div'); badge.className = 'winner-badge'; badge.innerText = 'WINNER'; element.appendChild(badge); } function openSfTrailer(key) { const modal = document.getElementById('scifi-modal'); const content = document.getElementById('scifi-modal-content'); content.innerHTML = ``; modal.style.display = 'block'; } function closeSfTrailer() { const modal = document.getElementById('scifi-modal'); document.getElementById('scifi-modal-content').innerHTML = ''; modal.style.display = 'none'; } document.getElementById('scifi-modal').onclick = function(e) { if(e.target === this) closeSfTrailer(); }

FIGHTER 1

FIGHTER 2

Related Articles